// 封装路由模块
// 1. 装包 yarn add vue-router@3.5.3
// 2. 引入到 main.js  VueRouter 是一个构造函数
import VueRouter from 'vue-router'
import Vue from 'vue'

// 引入组件对象
import Find from '../view/Find.vue'
import My from '../view/My.vue'
import Friend from '../view/Friend.vue'
import NotFound from '../view/NotFound.vue'

// 3. 安装 VueRouter 插件, Vue.use()
// 自动注册 router-view 组件
Vue.use(VueRouter)

// 4. 创建路由对象
// 核心步骤1: 配置路由规则
const routes = [
  // 一个对象表示一条路由规则, 路由就是路径和组件的映射关系
  // {
  //   // 路径
  //   path: '',
  //   // 组件
  //   component: 组件对象
  // }
  {
    path: '/',
    redirect: '/find'
  },
  {
    // 路径
    path: '/find',
    // 组件
    component: Find,
    name: 'find'
  },
  {
    // 路径
    path: '/my',
    // 组件
    component: My,
    name: 'my'
  },
  {
    // 路径
    path: '/friend',
    // 组件
    component: Friend,
    name: 'friend'
  },
  {
    path: '*',
    component: NotFound
  }
]
const router = new VueRouter({
  // 可以配置路由信息
  routes,
  linkActiveClass: 'active',
  linkExactActiveClass: 'e-active',
  mode: 'history'
})

// 默认导出 router 对象
export default router